import React, { useState } from 'react';

import { Input } from 'antd';

/**
 * 时间范围选项接口
 */
interface TimeRangeOption {
  /** 选项值 */
  value: number;
  /** 选项标签 */
  label: string;
}

/**
 * 时间范围选择器组件属性
 */
interface TimeRangeSelectorProps {
  /** 当前选中的时间范围 */
  value?: number;
  /** 时间范围变化回调 */
  onChange?: (value: number) => void;
  /** 自定义时间范围选项 */
  options?: TimeRangeOption[];
  /** 是否显示自定义输入 */
  showCustom?: boolean;
  /** 自定义输入的最大值 */
  maxCustomDays?: number;
  /** 自定义输入的最小值 */
  minCustomDays?: number;
}

/**
 * 默认时间范围选项
 */
const DEFAULT_TIME_OPTIONS: TimeRangeOption[] = [
  { value: 1, label: '1天' },
  { value: 7, label: '7天' },
  { value: 30, label: '30天' },
  { value: 999, label: '自定义' },
];

/**
 * 时间范围选择器组件
 * 提供预设时间范围选择和自定义天数输入功能
 */
const TimeRangeSelector: React.FC<TimeRangeSelectorProps> = ({
  value = 7,
  onChange,
  options = DEFAULT_TIME_OPTIONS,
  showCustom = true,
  maxCustomDays = 365,
  minCustomDays = 1,
}) => {
  const [customDays, setCustomDays] = useState('');
  const [showCustomInput, setShowCustomInput] = useState(false);

  /**
   * 处理时间范围选项点击
   * @param optionValue 选项值
   */
  const handleOptionClick = (optionValue: number) => {
    if (optionValue === 999 && showCustom) {
      // 自定义选项
      setShowCustomInput(true);
    } else {
      // 预设选项
      setShowCustomInput(false);
      onChange?.(optionValue);
    }
  };

  /**
   * 处理自定义天数确认
   */
  const handleCustomConfirm = () => {
    const days = parseInt(customDays);
    if (days >= minCustomDays && days <= maxCustomDays) {
      onChange?.(days);
      setShowCustomInput(false);
    } else {
      window.$message.error(`请输入${minCustomDays}-${maxCustomDays}之间的天数`);
    }
  };

  /**
   * 处理自定义输入取消
   */
  const handleCustomCancel = () => {
    setShowCustomInput(false);
    setCustomDays('');
    onChange?.(7); // 重置为默认值
  };

  /**
   * 处理回车键确认
   */
  const handleEnterPress = () => {
    handleCustomConfirm();
  };

  return (
    <div className="flex space-x-2 relative">
      {/* 时间范围选项 */}
      {options.map(option => (
        <span
          key={option.value}
          className={`cursor-pointer px-3 py-1 text-sm bg-#F9FAFC flex-center transition-colors duration-200 ${
            value === option.value
              ? 'bg-blue-100 text-blue-600 rounded'
              : 'text-gray-600 hover:text-blue-600 hover:bg-gray-100 rounded'
          }`}
          onClick={() => handleOptionClick(option.value)}
        >
          {option.label}
        </span>
      ))}

      {/* 自定义输入区域 */}
      {showCustomInput && showCustom && (
        <div className="z-99 mb-4 flex items-center space-x-2 justify-end absolute bottom-[-50px] right-0 w-[320px] bg-white border border-gray-200 rounded-lg p-3 shadow-lg">
          <span className="text-sm text-gray-600 whitespace-nowrap">自定义天数:</span>
          <Input
            type="number"
            placeholder="请输入天数"
            value={customDays}
            size="small"
            onChange={e => setCustomDays(e.target.value)}
            onPressEnter={handleEnterPress}
            className="w-32"
            min={minCustomDays}
            max={maxCustomDays}
          />
          <button
            className="cursor-pointer px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors duration-200 whitespace-nowrap"
            onClick={handleCustomConfirm}
          >
            确定
          </button>
          <button
            className="cursor-pointer px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded hover:bg-gray-300 transition-colors duration-200 whitespace-nowrap"
            onClick={handleCustomCancel}
          >
            取消
          </button>
        </div>
      )}
    </div>
  );
};

export default TimeRangeSelector;
